<template>
  <div class="app-container">

    <el-button type="primary" @click="handleAddRole01">新增</el-button>
    <div style="height:650px;display: flex;">
      <el-table :data="rolesList" v-loading='loading' style="margin-top:30px;">

        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-table :data="scope.row.topicGones" style="padding:0px 20px;">
              <el-table-column label="产品标题：" prop="topicGoneName"></el-table-column>
              <el-table-column label="产品内容：" prop="topicGoneSimple"></el-table-column>
              <el-table-column align="center" label="">
                <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="handleEdit03(scope.row)">修改</el-button>
                  <!-- <el-popconfirm title="是否删除" @confirm='handleDelete(scope.row)'>
                                  <el-button slot="reference" type="danger">删除</el-button>
                              </el-popconfirm> -->
                </template>
              </el-table-column>
            </el-table>
            <el-table :data="scope.row.topicShowusers" style="padding:0px 20px;">
              <el-table-column label="蓝盾用户ID：" prop="id"></el-table-column>
              <el-table-column label="蓝盾用户：" prop="link"></el-table-column>
              <el-table-column align="center" label="">
                <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="handleEdit02(scope.row)">修改</el-button>
                  <!-- <el-popconfirm title="是否删除" @confirm='handleDelete(scope.row)'>
                                  <el-button slot="reference" type="danger">删除</el-button>
                              </el-popconfirm> -->
                </template>
              </el-table-column>
            </el-table>
          </template>

        </el-table-column>

        <el-table-column label="ID" prop="topic.id"></el-table-column>
        <el-table-column label="标题" prop="topic.title"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="handleAddRole03(scope.row.topic)">新增产品</el-button>
            <el-button type="primary" @click="handleAddRole02(scope.row.topic)">新增蓝盾用户</el-button>
            <el-button type="primary" size="mini" @click="handleEdit01(scope.row.topic)">修改</el-button>
            <el-popconfirm title="是否删除" @confirm='handleDelete(scope.row.topic)'>
              <el-button slot="reference" type="danger">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

    </div>

    <!-- 添加对话框 -->
    <el-dialog :visible.sync="createDialogVisible03" @close="handleCancel" :close-on-click-modal="false" :title="isAddOrUpdata03?'新增专题':'修改专题'">
      <el-form label-width="150px" v-loading='loading'>
        <el-form-item label="中部介绍名称：" prop="sortNum">
          <el-input v-model="topicGones.topicGoneName" />
        </el-form-item>
        <el-form-item label="中部介绍内容：" prop="sortNum">
          <el-input type="textarea" v-model="topicGones.topicGoneSimple" />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleCancel">取消</el-button>
          <el-button :loading='loading' type="primary" @click="handlePublish03">保存</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>

    <!-- 添加对话框 -->
    <el-dialog :visible.sync="createDialogVisible02" @close="handleCancel" :close-on-click-modal="false" :title="isAddOrUpdata02?'新增专题':'修改专题'">
      <el-form label-width="150px" v-loading='loading'>

        <el-form-item label="蓝盾用户：" prop="imgurl">
          <el-upload :data='{dirName:""}' :headers="headers" list-type="picture-card" :file-list="LANDUNfileList" :on-remove="LANDUNhandleRemove" :before-upload="beforeAvatarUpload" :on-success="LANDUNhandleAvatarSuccess" :action="uploadPath">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="链接：" prop="sortNum">
          <el-input v-model="topicShowusers.link" />
        </el-form-item>

        <el-form-item>
          <el-button @click="handleCancel">取消</el-button>
          <el-button :loading='loading' type="primary" @click="handlePublish02">保存</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>

    <!-- 添加对话框 -->
    <el-dialog :visible.sync="createDialogVisible01" @close="handleCancel" :close-on-click-modal="false" :title="isAddOrUpdata01?'新增专题':'修改专题'">
      <el-form label-width="150px" v-loading='loading'>
        <el-form-item label="LOGO图：">
          <el-upload :data='{dirName:""}' :headers="headers" :limit="1" list-type="picture-card" :file-list="LOGOfileList" :on-remove="LOGOhandleRemove" :before-upload="beforeAvatarUpload" :on-success="LOGOhandleAvatarSuccess" :on-error="LOGOfileError" :action="uploadPath">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="展示图：">
          <el-upload :data='{dirName:""}' :headers="headers" :limit="1" list-type="picture-card" :file-list="SHOWfileList" :on-remove="SHOWhandleRemove" :before-upload="beforeAvatarUpload" :on-success="SHOWhandleAvatarSuccess" :on-error="SHOWfileError" :action="uploadPath">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="背景图：">
          <el-upload :data='{dirName:""}' :headers="headers" :limit="1" list-type="picture-card" :file-list="BACKfileList" :on-remove="BACKhandleRemove" :on-success="BACKhandleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-error="BACKfileError" :action="uploadPath">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="标题：" prop="sortNum">
          <el-input v-model="topic.title" />
        </el-form-item>
        <el-form-item label="简介：" prop="sortNum">
          <el-input type="textarea" v-model="topic.simpleTxt" />
        </el-form-item>

        <el-form-item label="产品名称：" prop="sortNum">
          <el-input v-model="topic.productName" />
        </el-form-item>
        <el-form-item label="产品介绍：" prop="sortNum">
          <el-input v-model="topic.productIntroduce" />
        </el-form-item>

        <el-form-item label="蓝奏云下载：" prop="sortNum">
          <el-input v-model="topic.productDownLanzou" />
        </el-form-item>
        <el-form-item label="本地下载：" prop="sortNum">
          <el-input v-model="topic.productDownLocal" />
        </el-form-item>

        <el-form-item>
          <el-button @click="handleCancel">取消</el-button>
          <el-button :loading='loading' type="primary" @click="handlePublish01">保存</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>

    <el-pagination background layout="prev, pager, next,sizes,total" :total='total' @current-change='current_change' @size-change='size_change' style="text-align: center; margin-top: 60px;" :page-sizes="[10, 50, 100, 1000]">
    </el-pagination>

  </div>
</template>

<script>
import api from '@/api/website/topicList'
import { uploadPath } from '@/api/storage'
import { getToken } from '@/utils/auth'
export default {
  name: 'topicList',
  data() {
    return {
      topicId: '',
      isAddOrUpdata01: true, // true新增false修改
      isAddOrUpdata02: true, // true新增false修改
      isAddOrUpdata03: true, // true新增false修改
      createDialogVisible01: false,
      createDialogVisible02: false,
      createDialogVisible03: false,
      uploadPath: uploadPath,
      rolesList: [],
      LOGOfileList: [],
      SHOWfileList: [],
      BACKfileList: [],
      LANDUNfileList: [],
      total: 0,
      limit: '',
      page: '',
      pages: '',
      loading: false,
      topic: {
        backImg: '',
        logoImg: '',
        productDownLanzou: '',
        productDownLocal: '',
        productIntroduce: '',
        productName: '',
        showImg: '',
        simpleTxt: '',
        title: ''
      },
      topicGones: {
        topicGoneName: '',
        topicGoneSimple: ''
      },
      topicShowusers: {
        topicUserShow: '',
        link: ''
      }
    }
  },
  computed: {
    headers() {
      return {
        'X-Hyxxkj-Admin-Token': getToken()
      }
    }
  },
  created() {},
  mounted() {
    this.getList()
  },
  methods: {
    LOGOhandleRemove() {
      // 移除图片
      this.topic.logoImg = ''
    },
    SHOWhandleRemove() {
      // 移除图片
      this.topic.showImg = ''
    },
    BACKhandleRemove() {
      // 移除图片
      this.topic.backImg = ''
    },
    LANDUNhandleRemove(e) {
      // 移除图片
    },

    beforeAvatarUpload(file) {
      // 图片改变
      var isJPG = false
      if (
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/gif'
      ) {
        isJPG = true
      }
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG/GIF 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },

    LOGOhandleAvatarSuccess(res, file) {
      // 上传成功
      if (res.errno == 0) {
        this.topic.logoImg = res.data.url
      }
    },
    SHOWhandleAvatarSuccess(res, file, e) {
      // 上传成功
      if (res.errno == 0) {
        this.topic.showImg = res.data.url
      }
    },
    BACKhandleAvatarSuccess(res, file, e) {
      // 上传成功
      if (res.errno == 0) {
        console.log(res.data.url)
        this.topic.backImg = res.data.url
      }
    },
    LANDUNhandleAvatarSuccess(res, file, e) {
      // 上传成功
      if (res.errno == 0) {
        this.topicShowusers.topicUserShow = res.data.url
      }
    },
    LOGOfileError(err, file, fileList) {
      // 上传出错
      this.ruleForm.imgurl = ''
      this.$message({
        message: '上传出错',
        type: 'warning'
      })
    },
    SHOWfileError(err, file, fileList) {
      // 上传出错
      this.ruleForm.imgurl = ''
      this.$message({
        message: '上传出错',
        type: 'warning'
      })
    },
    BACKfileError(err, file, fileList) {
      // 上传出错
      this.ruleForm.imgurl = ''
      this.$message({
        message: '上传出错',
        type: 'warning'
      })
    },
    LANDUNfileError(err, file, fileList) {
      // 上传出错
      this.ruleForm.imgurl = ''
      this.$message({
        message: '上传出错',
        type: 'warning'
      })
    },

    handleAddRole01() {
      // 新增对话框
      this.isAddOrUpdata01 = true
      this.createDialogVisible01 = true
    },
    handleAddRole02(e) {
      // 新增对话框
      this.topicId = e.id
      this.isAddOrUpdata02 = true
      this.createDialogVisible02 = true
    },
    handleAddRole03(e) {
      // 新增对话框
      this.topicId = e.id
      this.isAddOrUpdata03 = true
      this.createDialogVisible03 = true
    },

    handlePublish01() {
      if (this.isAddOrUpdata01) {
        this.loading = true
        api
          .create(this.topic)
          .then((res) => {
            if (res.data.errno == 0) {
              this.loading = false
              this.$message({
                message: '新增成功',
                type: 'success'
              })
              this.getList()
              this.handleCancel()
            }
          })
          .catch((e) => {
            this.loading = false
            this.$message({
              message: e.data,
              type: 'warning'
            })
          })
      } else {
        api
          .update(this.topic)
          .then((res) => {
            if (res.data.errno == 0) {
              this.loading = false
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.getList()
              this.handleCancel()
            }
          })
          .catch((e) => {
            this.loading = false
            this.$message({
              message: e.data,
              type: 'warning'
            })
          })
      }
    },
    handlePublish02() {
      if (this.isAddOrUpdata02) {
        this.topicShowusers.topicId = this.topicId
        this.loading = true
        api
          .createshowuser(this.topicShowusers)
          .then((res) => {
            if (res.data.errno == 0) {
              this.loading = false
              this.$message({
                message: '新增成功',
                type: 'success'
              })
              this.getList()
              this.handleCancel()
            }
          })
          .catch((e) => {
            this.loading = false
            this.$message({
              message: e.data,
              type: 'warning'
            })
          })
      } else {
        api
          .updateshowuser(this.topicShowusers)
          .then((res) => {
            if (res.data.errno == 0) {
              this.loading = false
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.getList()
              this.handleCancel()
            }
          })
          .catch((e) => {
            this.loading = false
            this.$message({
              message: e.data,
              type: 'warning'
            })
          })
      }
    },
    handlePublish03() {
      if (this.isAddOrUpdata03) {
        this.topicGones.topicId = this.topicId
        this.loading = true
        api
          .creategone(this.topicGones)
          .then((res) => {
            if (res.data.errno == 0) {
              this.loading = false
              this.$message({
                message: '新增成功',
                type: 'success'
              })
              this.getList()
              this.handleCancel()
            }
          })
          .catch((e) => {
            this.loading = false
            this.$message({
              message: e.data,
              type: 'warning'
            })
          })
      } else {
        api
          .updategone(this.topicGones)
          .then((res) => {
            if (res.data.errno == 0) {
              this.loading = false
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.getList()
              this.handleCancel()
            }
          })
          .catch((e) => {
            this.loading = false
            this.$message({
              message: e.data,
              type: 'warning'
            })
          })
      }
    },
    handleCancel() {
      this.createDialogVisible01 = false
      this.createDialogVisible02 = false
      this.createDialogVisible03 = false
      this.LOGOfileList = []
      this.SHOWfileList = []
      this.BACKfileList = []
      this.LANDUNfileList = []
    },
    handleEdit01(e) {
      this.isAddOrUpdata01 = false
      this.createDialogVisible01 = true
      this.topic.backImg = e.backImg
      this.topic.id = e.id
      this.topic.logoImg = e.logoImg
      this.topic.productDownLanzou = e.productDownLanzou
      this.topic.productDownLocal = e.productDownLocal
      this.topic.productIntroduce = e.productIntroduce
      this.topic.productName = e.productName
      this.topic.showImg = e.showImg
      this.topic.title = e.title
      this.topic.simpleTxt = e.simpleTxt
      this.LOGOfileList.push({ url: this.topic.logoImg })
      this.SHOWfileList.push({ url: this.topic.showImg })
      this.BACKfileList.push({ url: this.topic.backImg })
    },
    handleEdit02(e) {
      this.isAddOrUpdata02 = false
      this.createDialogVisible02 = true
      this.topicShowusers.id = e.id
      this.topicShowusers.link = e.link
      this.topicShowusers.topicId = e.topicId
      this.topicShowusers.topicUserShow = e.topicUserShow
      this.LANDUNfileList.push({ url: this.topicShowusers.topicUserShow })
    },
    handleEdit03(e) {
      this.isAddOrUpdata03 = false
      this.createDialogVisible03 = true
      this.topicGones.id = e.id
      this.topicGones.topicGoneName = e.topicGoneName
      this.topicGones.topicId = e.topicId
      this.topicGones.topicGoneSimple = e.topicGoneSimple
    },
    handleDelete(e) {
      api.Delete(e).then((res) => {
        if (res.data.errno == 0) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getList()
        }
      })
    },
    current_change(e) {
      this.page = e
      this.getList()
    },
    size_change(e) {
      this.limit = e
      this.getList()
    },

    getList() {
      this.loading = true
      api
        .list()
        .then((res) => {
          if (res.data.errno == 0) {
            this.rolesList = res.data.data.list
            this.total = res.data.data.list.length
            this.page = res.data.data.page
            this.pages = res.data.data.pages
            this.total = res.data.data.total
            this.limit = res.data.data.limit
            this.loading = false
          }
        })
        .catch(() => {
          this.Loading = false
        })
    }
  }
}
</script>
<style lang="less" scoped>
</style>